<template>
	<view>
		<u-form :model="form" ref="uForm" :rules="rules" id="form-container">
			<u-form-item label="员工工号" :label-width="labelWidth" prop="jobNumber">
				<u-input placeholder="请输入员工工号" v-model="form.jobNumber" />
			</u-form-item>
			<u-form-item label="原因" :label-width="labelWidth" prop="content">
				<u-input type="textarea" placeholder="请输入原因" v-model="form.content" />
			</u-form-item>
			<u-form-item label="分数" :label-width="labelWidth" prop="score">
				<u-input type="digit" placeholder="请输入分数" v-model="form.score" />
			</u-form-item>
			<u-form-item class="u-flex u-row-center">
				<u-button type="success" size="medium" @click="submit">提交</u-button>
			</u-form-item>
		</u-form>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { machineScan,managerQualityScore,accessPersonInfo } from '../utils/index.js'
export default {
	data() {
		return {
			form: {
				jobNumber: '',			//员工工号
				content: '',			//原因
				score: ''				//分数
			},
			labelWidth: 160,			//表单每一项的宽度
			rules: {
				jobNumber: [
					{
						required: true, 
						message: '请输入员工工号',
						trigger: ['change','blur'],
					}
				],
				content: [
					{
						required: true, 
						message: '请输入原因',
						trigger: ['change','blur'],
					}
				],
				score: [
					{
						required: true, 
						message: '请输入分数',
						trigger: ['change','blur'],
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return value>=-0.2&&value<=0.2;
						},
						message: '分数需在-0.2~0.2区间',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				]
			},
			userInfo: {}
		}
	},
	methods: {
		// 表单验证
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
					this.postForm()
				} else {
					console.log('验证失败');
				}
			});
		},
		// 提交表单函数
		async postForm() {
			let query = Object.assign({},this.form)
			query.landerJobNumber = this.userInfo.jobNumber
			const { data } = await managerQualityScore(query)
			const msg = data.msg
			console.log(msg)
			if(data.code == '1') {
				this.$refs.uToast.show({
					title: msg,
					type: 'success',
					icon: true
				})
			} else {
				this.$refs.uToast.show({
					title: msg,
					type: 'error',
					icon: true
				})
			}
		},
		// 获取个人信息的函数
		// 获取员工信息赋值给form
		async getUserInfo(){
			const {data} = await accessPersonInfo()
			this.userInfo = Object.assign({},data.data)
		}
	  },
	  onLoad() {
	  	this.getUserInfo()
	  },
	  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	  onReady() {
	    	this.$refs.uForm.setRules(this.rules);
	  }
	}
</script>

<style lang="scss" scoped>
#form-container ::v-deep .u-form-item {
	margin-top: 15rpx;
	padding: 10rpx 30rpx;
}
</style>
